/**
 * 关键节点
 * */
import React from 'react';
import {
    Tabs, Select, Row, Col, Card, Rate, Button, Radio, Tag, Comment, Avatar, PageHeader, message
} from 'antd';
import {createFromIconfontCN, EditOutlined, HistoryOutlined} from '@ant-design/icons';
import 'element-theme-default';
import {Link} from 'react-router-dom';
import moment from 'moment';
import './StaticStatus.less';
import {ShopService, ProductService, CommentService, UserService} from '../eosjs/EosService'

moment.locale('zh-cn');



class StoreInfo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sid: parseInt(this.props.match.params.sid),
            shopInfo: {description: "", shop_name: "", address: ""},
            product: [],
            comment: [],
            shopTags: [],
            showInvisible: false,
            rateUpperBound: 5,
            rateLowerBound: 0,
            avatarMap: new Map()
        };

    }

    componentDidMount() {
        //获取数据
        this.setState({
            sid: this.props.match.params.sid
        })
        this.getProductInfo();
        this.getShopDetail();
        this.getComment();
        // console.log(this.state)
        CommentService.getComments(this.props.match.params.sid, {}).then(res => {
            console.log(res)
        })

    }

    render() {
        return (
            <div className="detail">
                <PageHeader
                    className="site-page-header"
                    onBack={() => this.props.history.go(-1)}
                    title="店铺详情"
                />
                <div className="shop_info">
                    <Row gutter={24}>
                        <Col span={3}></Col>
                        <Col span={11}>
                            <Card title={this.state.shopInfo.shop_name + " (" + this.state.shopInfo.tag + ")"}
                                  bordered={false} style={{width: "100%"}}>
                                <span className={"detail-text"}>简介：{this.state.shopInfo.description}</span>
                                <br/><Rate disabled defaultValue={2}/>
                                <br/><br/><span className={"detail-text"}>{this.state.comment.length}条评论</span>
                                {/*<br/><span className={"detail-text"}>口味：4.21 环境：4.11 服务：4.01</span>*/}
                                <br/><br/><span className={"detail-text"}>地址：{this.state.shopInfo.address}</span>
                                <br/><br/>
                                <Link to={{
                                    pathname: "/editComment",
                                    state: {replyId: 0, shopId: this.state.sid, editMode: "create"}
                                }}>
                                    <Button type="primary" icon={<EditOutlined/>} size={"large"}>
                                        写点评
                                    </Button>
                                </Link>

                                <Button icon={<HistoryOutlined/>} size={"large"}
                                        style={{marginLeft: "5%"}} onClick={this.showHistoryComment}>
                                    {this.state.showInvisible ? "查看当前点评" : "查看历史点评"}
                                </Button>
                            </Card>
                        </Col>
                        <Col span={7}>
                            <Card
                                hoverable
                                style={{width: "100%"}}
                            >
                                <img alt="example"
                                     src={this.state.shopInfo.picture_url}/>
                            </Card>
                        </Col>
                        <Col span={3}></Col>
                    </Row>
                </div>
                <div className={"dish_info"}>
                    <Row gutter={24}>
                        <Col span={3}></Col>
                        <Col span={18}>
                            <Card
                                title="菜品目录" bordered={false} style={{width: "100%"}}
                            >
                                <Row gutter={24}>
                                    {this.state.product.map((value, index) => {
                                        return (
                                            <Col span={6} key={index}>
                                                <Card
                                                    title={value.goods_name}
                                                    hoverable
                                                    style={{width: "100%"}}
                                                    cover={<img alt="example"
                                                                src={value.picture_url}/>}
                                                >
                                                    <span>{value.description}</span>
                                                </Card>
                                            </Col>
                                        );
                                    })}
                                </Row>
                            </Card>
                        </Col>
                        <Col span={3}></Col>
                    </Row>
                </div>
                <Row gutter={24}>
                    <Col span={3}></Col>
                    <Col span={18}>
                        <Card
                            title="网友点评" bordered={false} style={{width: "100%"}}
                        >
                            <Radio.Group name="radiogroup" defaultValue={1} onChange={this.rateBoundChange}>
                                <Radio value={1}>全部</Radio>
                                <Radio value={2}>好评</Radio>
                                <Radio value={3}>中评</Radio>
                                <Radio value={4}>差评</Radio>
                            </Radio.Group>
                            <br/>
                            <br/>
                            {this.state.shopTags.map(((value, index) => {
                                // console.log(this.state.shopTags)
                                return <Tag key={index} color="default">{value}</Tag>
                            }))}
                            <br/>
                            <br/>
                            {this.state.comment.map((value, index) => {
                                /*好评、中评、差评、全部筛选条件*/
                                if (this.state.rateLowerBound > value.content.rate || this.state.rateUpperBound < value.content.rate) {
                                    return;
                                }
                                /*如果不要求显示历史点评，则不予显示；不独立显示回复类的评论*/
                                if ((this.state.showInvisible === false && value.visible === 0) || value.replyid !== 0) {
                                    return;
                                }
                                return (
                                    <Comment key={index}
                                             actions={value.visible ? [
                                                 <span key="comment-nested-reply-to">
                                                     <Link to={{
                                                         pathname: "/editComment",
                                                         state: {
                                                             replyId: value.cid,
                                                             shopId: this.state.sid,
                                                             editMode: "create"
                                                         }
                                                     }}>回复</Link>
                                                 </span>] : ""}
                                             author={value.user}
                                             avatar={
                                                 <Avatar
                                                     src={this.state.avatarMap.get(value.user) === null ? "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" : this.state.avatarMap.get(value.user)}
                                                     alt={value.user}
                                                     onClick={() => this.props.history.push("/user/" + value.user)}
                                                 />
                                             }
                                             content={
                                                 <div>
                                                     <Rate disabled defaultValue={value.content.rate}/>
                                                     <br/>
                                                     <br/>
                                                     {value.content.tags.map((tagValue, tagId) => {
                                                         return <Tag key={tagId} color="default">{tagValue}</Tag>
                                                     })}
                                                     <br/>
                                                     <br/>
                                                     {value.content.text}
                                                 </div>
                                             }
                                    >
                                        {this.state.comment.map((replyValue, replyIndex) => {
                                            if ((this.state.showInvisible === false && replyValue.visible) === 0 || replyValue.replyid !== value.cid) {
                                                return;
                                            }
                                            return (<Comment key={index + "-" + replyIndex} actions={[]}
                                                             author={replyValue.user}
                                                             avatar={
                                                                 <Avatar
                                                                     src={this.state.avatarMap.get(replyValue.user) === null ? "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" : this.state.avatarMap.get(replyValue.user)}
                                                                     alt={replyValue.user}
                                                                    onClick={() => this.props.history.push("/user/" + replyValue.user)}
                                                                 />
                                                             }
                                                             content={replyValue.content.text}
                                            />);
                                        })}
                                    </Comment>);
                            })}
                        </Card>
                    </Col>
                    <Col span={3}></Col>
                </Row>
            </div>
        )
    }

    // 商品信息
    getProductInfo = () => {
        console.log(this.props.match.params.sid, this.state.sid)
        ProductService.getProducts(this.state.sid, {}, 1, 20).then(res => {
            this.setState({
                product: res.rows
            })
            console.log("商品信息获取！", this.state)

        })
    }
    // 商铺信息
    getShopDetail = () => {
        ShopService.getShops({sid: this.state.sid}, 1, 100).then(res => {
            if (res.rows.length <= 0) {
                this.props.history.push("/error404");
                return;
            }
            this.setState({
                shopInfo: res.rows[0]
            })
            console.log("商铺信息获取！", this.state)
        })
    }
    // 评论信息
    getComment = () => {
        CommentService.getComments(this.state.sid, {}).then(res => {
            let shopTags = new Set();
            let tempComment = res.rows;
            // console.log(res.rows)
            for (let i = 0; i < tempComment.length; i++) {
                try {
                    //获取头像
                    UserService.getUserInfo(tempComment[i].user).then(userRes => {
                        const avatarUrl = "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png";
                        if(userRes.rows !== null){
                            this.state.avatarMap.set(tempComment[i].user, userRes.rows.avatar_url);
                        }
                        else{
                            this.state.avatarMap.set(tempComment[i].user, avatarUrl);
                        }
                    })
                    //整合标签，评分
                    tempComment[i].content = JSON.parse(tempComment[i].content);
                    if (typeof (tempComment[i].content.tags) === "undefined") {
                        tempComment[i].content.tags = ["测试数据，无标签"];
                    }
                    if (typeof (tempComment[i].content.rate) === "undefined") {
                        tempComment[i].content.rate = 3;
                    }
                } catch (e) {
                    tempComment[i].content = {text: tempComment[i].content, rate: 2, tags: ["测试数据，无标签"]};
                }
                for (let tag of tempComment[i].content.tags) {
                    shopTags.add(tag);
                }
            }
            this.setState({
                comment: tempComment,
                shopTags: Array.from(shopTags)
            })
            console.log("评论信息获取！", this.state, res)
        })
    }
    //是否显示历史评论
    showHistoryComment = () => {
        if (!this.state.showInvisible === true) {
            message.success("已显示历史点评！")
        } else {
            message.success("已关闭历史点评！")
        }
        this.setState({
            showInvisible: !this.state.showInvisible
        })
    }
    rateBoundChange = (e) => {
        console.log(e.target.value)
        let lowerBound = 0;
        let upperBound = 5;
        if (e.target.value === 2) {
            lowerBound = 5;
            upperBound = 5;
        } else if (e.target.value === 3) {
            lowerBound = 2;
            upperBound = 4;
        } else if (e.target.value === 4) {
            lowerBound = 1;
            upperBound = 1;
        }
        this.setState({
            rateLowerBound: lowerBound,
            rateUpperBound: upperBound
        })
    }
}

export default StoreInfo;
